import React from 'react'
import {
    NavLink, Outlet, useLocation
} from 'react-router-dom'

export default function Home() {
    const {pathname} = useLocation()
    return (
        <div>
            <h2>Home组件内容</h2>
            <div>
                <ul className="nav nav-tabs">
                    <li className={pathname.toLowerCase()==="/home/news"?"active":""}><NavLink to="/home/news">News</NavLink></li>
                    <li className={pathname.toLowerCase()==="/home/message"?"active":""}><NavLink to="/home/message" className="myActive" aria-current="page">Message</NavLink>
                    </li>
                </ul>
                <div>
                    <Outlet></Outlet>
                </div>
            </div>
        </div>
    )
}
